<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 </head>
    <ui:composition template="/template/template.xhtml">
    	<ui:define name="conteudo"> 
			<div id="body-left">
					<div id="topic-pic">
					<h:graphicImage url="#{verAlbum.album.imagem}" width="250" height="250" alt="Pic 1" />
				</div>
				<div class="coment">
					<h2>
						<h:outputText value="#{verAlbum.album.nome}" />
					</h2>
					<p>
						<h:outputText value="#{msgs.ano}: " />
						<h:outputText value="#{verAlbum.album.ano}" />
					</p>
					<p>
						<h:outputText value="#{msgs.artista}: " />
						<h:outputText value="#{verAlbum.album.artista.nome}" />
					</p>
				</div>
			</div>
			<div id="body-right">
				<h2>
					<h:outputText value="#{msgs.musicas}" />
				</h2>
				<rich:dataTable value="#{verAlbum.album.musicas}" var="musica">
					<rich:column>
						<div class="box">
							<h:outputLink value="artista.jsf?id=${musica.album.artista.id}">
								<h:graphicImage url="#{musica.album.artista.imagem}" width="100" height="66" alt="Pic 1" class="left" />
							</h:outputLink>
								<table class="info">
									<tr>
										<th><h:outputText value="#{msgs.nome}" /></th><td><h:outputText value="#{musica.nome}" /></td>
									</tr>
									<tr>
										<th><h:outputText value="#{msgs.categoria}" /></th><td><h:outputText value="#{musica.categoria.nome}" /></td>
									</tr>
								</table>
								<div class="btns">
									<h:outputLink value="musica.jsf?id=#{musica.id}">
										<h:outputText value="#{msgs.escutar}" />
									</h:outputLink>
								</div>
							<div class="clear"></div>
						</div>
					</rich:column>
				</rich:dataTable>
			</div>
		</ui:define>
    </ui:composition>
</html>